<template>
    <div class="patnerBill">
       <a-card>
             <a-form :form="form">
                 <a-row :gutter="30">
                     <a-col :span="8">
                         <a-form-item label="合作方名称" :label-col="{ span: 7}" :wrapper-col="{ span: 16, offset: 1}">
                                <a-input
                                        placeholder="请输入"
                                        v-decorator="[
                                       'partnerName',
                                        {rules: [{ required: true, message: '请输入合作方名称!' }]}
                                          ]"
                                 />
                        </a-form-item>
                     </a-col>

                     <a-col :span="8">
                        <a-form-item  label="订单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                                <a-input
                                        placeholder="请输入"
                                        v-decorator="['order',
                                     {rules: [{ required: true, message: '请输入订单号名称!' }]}
                                       ]"  
                                 />
                        </a-form-item>
                     </a-col>

                     <a-col :span="8">
                        <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                                <a-input
                                        placeholder="请输入"
                                        v-decorator="[
                                        'order',
                                       {rules: [{ required: true, message: '请输入设备编号' }]}
                                        ]"  
                            /> 
                        </a-form-item>
                     </a-col>
                 </a-row>

                 <a-row>
                      <a-col :span="8">
                        <a-form-item label="支付号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}" >
                                <a-input
                                        placeholder="请输入"
                                        v-decorator="['order',
                                       {rules: [{ required: true, message: '请输入支付号' }]}
                                          ]"  
                                 />
                        </a-form-item>
                     </a-col>

                     <a-col :span="8">
                        <a-form-item label="支付时间" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                            <a-range-picker
                             style="width: 100%"
                             v-decorator="['rangeConfig', rangeConfig]"
                             show-time
                             format="YYYY-MM-DD HH:mm:ss"
                            />
                        </a-form-item>
                     </a-col>
                      
                     <a-col :span="8">
                        <a-form-item label="支付方式" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                            <a-select
                        placeholder="请输入"
                        v-decorator="[
                              'payType  ',
                              {rules: [{ required: true, message: '请选择支付方式!' }]}
                              ]"
                      >
                        <a-select-option value="0">全部</a-select-option>
                        <a-select-option value="1">微信支付</a-select-option>
                        <a-select-option value="2">支付宝支付</a-select-option>
                        <a-select-option value="3">API</a-select-option> 
                      </a-select>
                        </a-form-item>
                     </a-col>
                 </a-row>

                 <a-row :gutter="30">
                     <a-col :span="8">
                          <a-form-item label="账单类型" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                            <a-select
                        placeholder="请输入"
                        v-decorator="[
                              'payType  ',
                              {rules: [{ required: true, message: '请选择账单类型!' }]}
                              ]"
                      >
                        <a-select-option value="0">全部</a-select-option>
                        <a-select-option value="1">已付款</a-select-option>
                        <a-select-option value="2">已退款</a-select-option>
                      
                      </a-select>
                        </a-form-item>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                     </a-col>

                     <a-col :span="8">
                          <a-form-item label="结算状态" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                            <a-select
                        placeholder="已结算"
                        v-decorator="[
                              'payType  ',
                              {rules: [{ required: true, message: '请选择账单类型 !' }]}
                              ]"
                      >
                        <a-select-option value="0">全部</a-select-option>
                        <a-select-option value="1">已结算</a-select-option>
                        <a-select-option value="2">未结算</a-select-option>
                      
                      </a-select>
                        </a-form-item>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                     </a-col>
                      <a-col :span="8">
                          <a-form-item label="点位名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
                            <a-input
                                       placeholder="请输入"
                                        v-decorator="['order',
                                       {rules: [{ required: true, message: '请输入点位名称' }]}
                                          ]"  
                                 />
                        </a-form-item>                                                      
                     </a-col>
                 </a-row>

                 <a-row>
                   <a-col :span="24" :style="{ textAlign: 'right' }">
                  <a-button
                    type="primary"
                    @click="partnerSearch()"
                    :style="{ marginRight: '1%' }"
                  >查询</a-button>
                  <a-button type="dashed" @click="listExport()" :style="{ marginRight: '1%' }">导出</a-button>
                  <a-button htmlType="reset">重置</a-button>
              </a-col>
            </a-row>
             </a-form>
         </a-card>
        <!-- 中间模块 -->
        <a-card class="cell">
          <ul>
            <li class="oneCell">
              <p>实收总金额</p>
              <p>1</p>
            </li>
            <li>
              <p>订单总金额</p>
              <p>2</p>
            </li>
            <li>
              <p>分润总金额</p>
              <p>3</p>
            </li>
            <li>
              <p>分润总额</p>
              <p>4</p>
            </li>
            <li>
              <p>应收金额</p>
              <p>5</p>
            </li>
          </ul>
        </a-card>
        <!-- 表格模块 -->
        <a-card>
            <a-table
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
          @change="handleTableChange"
          :bordered="true"
          >
         </a-table>
        </a-card>
          
    
    </div>
</template>

<script>
const data=[
  {
      key: "1",
  }
  
];
const columns = [
  {
    title: "支付时间",
    dataIndex: "payTime",
    scopedSlots: { customRender: "payment" },
    align: "center"
  },
  {
     title: "订单号",
    dataIndex: "ordernumber",
    scopedSlots: { customRender: "orderNo" },
    align: "center"
  },
  {
     title: "设备号",
    dataIndex: "deviceode",
    scopedSlots: { customRender: "deviceNo" },
    align: "center"
  },
  {
     title: "合作方名称",
    dataIndex: "partnername",
    scopedSlots: { customRender: "partnerNo" },
    align: "center"
  },
  {
     title: "账单类型",
    dataIndex: "ordertype",
    scopedSlots: { customRender: "ordertypeno" },
    align: "center"
  },
  {
     title: "订单详情 ",
    dataIndex: "orderdetail",
    scopedSlots: { customRender: "orderdetailNo" },
    align: "center"
  },
  {
     title: "结算状态",
    dataIndex: "resultstatus",
    scopedSlots: { customRender: "orderNo" },
    align: "center"
  },
  {
     title: "支付方式",
    dataIndex: "ordernumberd",
    scopedSlots: { customRender: "orderNo" },
    align: "center"
  },
  {
     title: "订单金额",
    dataIndex: "ordermoney",
    scopedSlots: { customRender: "ordermoneyNo" },
    align: "center"
  },
  {
     title: "分润比例",
    dataIndex: "proportion",
    scopedSlots: { customRender: "proportionNo" },
    align: "center"
  },
  {
     title: "分润金额",
    dataIndex: "ordernumbera",
    scopedSlots: { customRender: "orderNo" },
    align: "center"
  },
  {
     title: "应收金额",
    dataIndex: "ordernumberc",
    scopedSlots: { customRender: "orderNo" },
    align: "center"
  },
  
  ]

export default {
   data(){
       return {
            form: this.$form.createForm(this),
              rangeConfig: {
          rules: [{ type: "array", required: true, message: "请选择时间!" }]
      },
      columns,
      data,
        pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
       }
   },
   methods:{
      handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      // this.agentSearch();
      // this.findMyBillDetailsPageList();
    },
    //查询合作方账单
    partnerSearch(){
       var values = this.form.getFieldsValue();
       this.axios
        .post(this.baseUrl + "/partnerFinancial/findPartnerMyBillDetailsPageList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        .then(response => {
          console.log(response.data.data);
          // this.dataa = response.data.data.t.list;
          // this.sumSharingAmount = response.data.data.t.sumSharingAmount;
        })
    }



   },
   created(){
     this.partnerSearch();
   }
}
</script>

<style>
  .cell {
  margin-top: 2%;
}

.cell ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.cell ul li {
  width: 18%;
  text-align: center;
}
.cell ul li p:nth-of-type(1) {
  font-size: 1.2em;
}
.cell ul li p:nth-of-type(2) {
  font-size: 1.8em;
  margin: 0;
}
.oneCell {
  border-right: 2px solid rgb(217, 217, 217);
}
.oneCell p:nth-of-type(2) {
  color: red;
}
</style>
